<template>
    <span :style="{ minHeight: isbig ? '40px' : '20px' }" ref="_dom">
        <VIcon v-if="conf.show" :lib="lib" :name="el.name" :size="isbig ? 40 : 20" :color="color" :nofill="nofill" />
    </span>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from 'vue'

defineProps({
    isbig: { default: false },
    el: { default: {} as any },
    lib: { default: '' },
    color: { default: '' as any },
    nofill: { default: false }
})

const _dom = ref({} as any)

const conf = reactive({
    show: false,
    observer: {} as IntersectionObserver
})

onMounted(() => {
    conf.observer = new IntersectionObserver(
        (entries, observer) => {
            entries.forEach((entry) => {
                conf.show = entry.isIntersecting
            })
        },
        { threshold: 0 }
    )
    conf.observer.observe(_dom.value)
})
onUnmounted(() => {
    conf.observer.disconnect()
})
</script>
